<template>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <Form class="mt-4" :model="post" label-position="top">
                    <FormItem label="标题">
                        <Input v-model="post.title" placeholder="请输入标题"></Input>
                    </FormItem>
                    <FormItem label="分类">
                        <Cascader :data="categories" v-model="post.category_id" change-on-select clearable placeholder="请选择分类"></Cascader>
                    </FormItem>
                    <FormItem label="SEO 标题">
                        <Input v-model="post.seo_title" placeholder="请输入SEO 标题"></Input>
                    </FormItem>
                    <FormItem label="内容">
                        <Input v-model="post.body" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="描述">
                        <Input v-model="post.description" placeholder="请输入描述"></Input>
                    </FormItem>
                    <FormItem label="关键词">
                        <Input v-model="post.keywords" placeholder="请输入关键词"></Input>
                    </FormItem>
                </Form>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <img style="width:180px;height:180px" :src="coverUrl"/>
                        <Upload class="mt-2" :on-success='uploadSuccess'  :on-error='uploadError' :data="{floder:'images'}" action="http://admin.io/api/file">
                            <Button icon="ios-cloud-upload-outline">选择封面</Button>
                        </Upload>
                    </div>
                </div>
            </div>
        </div>
        <Button @click="create">保存</Button>
    </div>
</template>

<script>
    export default {
        name: "PostCreate",
        mounted() {
            this.getCategories();
        },
        methods: {

            getCategories() {
                http.get('/api/category',{
                    params:{
                        with_level:true
                    }
                }).then((data)=>{
                    let cates  = data.data;
                    console.log(data)
                    // cates.forEach((item)=>{
                    //     let category = {};
                    //     this.categories.push(category);
                    //     if (item.children.length == 0) {
                    //         category.value = item.id;
                    //         category.label = item.name;
                    //     } else {
                    //         this.buildParams(item,category)
                    //     }
                    // });
                });
            },
            buildParams(item,category) {
                category.value = item.id;
                category.label = item.name;
                if (item.children.length > 0) {
                    item.children.forEach((child)=>{
                        let c = {};
                        c.value = child.id;
                        c.label = child.name;
                        if(!category.children) {
                            category.children = []
                        }
                        category.children.push(c);
                        this.buildParams(child, c)
                    });
                }

            },
            create() {
                let params = new URLSearchParams();
                params.append('title',this.post.title);
                params.append('seo_title',this.post.seo_title);
                params.append('category_id',this.post.category_id);
                params.append('image',this.cover);
                params.append('body',this.post.body);
                params.append('author_id','1');
                params.append('keywords',this.post.keywords);
                params.append('description',this.post.description);
                http.post('/api/post',params).then((data)=>{
                    console.log(data);
                });
            },
            uploadSuccess(event, file, fileList) {
                this.cover = file.response;
                this.corverUrl = "http://admin.io/storage/"+this.cover;
                console.log(this.avatarUrl)

            },
            uploadError(event, file, fileList) {

                console.log('-----+++++')
            }
        },
        data() {
            return {
                cover:'',
                coverUrl:'',
                loading: false,
                categories: [],
                post: {}
            }
        }
    }
</script>

<style scoped>

</style>
